<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blogDetail.css">

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

</head>
<body>
    <!--    导航栏-->
    <div class="nav">
        <img src="image/person_Blog.png" alt="">
        <span>作者博客主页</span>
        <div class="spacer"></div>
        <a href="list.html">主页</a>
        <a href="logout" id="loginOut">退出</a>
    </div>

    <!--    页面版心-->
    <div class="container">
        <!--        左侧个人信息-->
        <div class="left">
            <div class="card">
                <img id="picture">
                <h3 id="name"></h3>
                <a href="#" id="github">github 地址</a>
                <div class="counter">
                    <div class="article">
                        <div>作者文章</div>
                        <div id="count"></div>
                    </div>
                    <div class="type">
                        <div>分类</div>
                        <div id="type">1</div>
                    </div>
                </div>
            </div>
        </div>

        <!--        右侧内容-->
        <div class="right">
            <div class="blog-container">
                <!-- 标题 -->
                <h3 id="title"></h3>
                <!-- 日期 -->
                <div class="date"></div>
                <!-- 博客正文 -->
                <div id="content" style="color: black ; background-color: rgb(255, 255, 255); font-family: '黑体'; border-radius: 5px; "></div>
                </div>
        </div>
    </div>
    <script>

        function getBlogDetail() {
            $.ajax({
                type: 'get',
                // 拿到整个url :后面带参数
                url: 'list'+location.search,
                success: function (body) {
                    // 标题
                    let h3 = document.querySelector('.blog-container>h3');
                    h3.innerHTML = body.title;
                    // 日期
                    let date = document.querySelector('.date');
                    date.innerHTML = body.postTime;
                    // 正文 正文带有 Markdown编辑器的格式
                    //         对应 要显示的容器
                    editormd.markdownToHTML('content', {
                        //         对应内容
                        markdown: body.content
                    })
                },
                error: function () {
                    alert("获取失败!")
                }
            })
        };
        getBlogDetail();
    </script>

<!--    从服务器获取当前作者的信息-->
    <link rel="stylesheet" href="css/blogList.css">
    <script>
        function getAuthorInfo(user) {
            $.ajax({
                type: 'get',
                url: 'authorInfo' + location.search,
                success: function (body) {
                    // 就是一个user对象
                    if(body.userName){
                        // 设置到页面
                        let name = document.querySelector("#name");
                        let picture = document.querySelector("#picture");
                        let github = document.querySelector("#github");
                        let count = document.querySelector("#count");
                        name.innerHTML = body.userName;
                        picture.src = "./image/" + body.photo + ".png";
                        if (body.github && body.github != ''){
                            github.href = body.github;
                        }else{
                            github.innerHTML = '';
                        }
                        count.innerHTML = body.count;

                        if (body.userName == user.userName){
                            // 当前作者是登录的用户 -- 追加删除按钮
                            let nav = document.querySelector('.nav');
                            let a = document.createElement('a');
                            a.innerHTML = '删除';
                            a.href = ""
                            nav.appendChild(a);
                            let edit = document.createElement('a');
                            edit.innerHTML = '编辑博客'
                            edit.href = 'edit.html' + location.search;
                            nav.appendChild(edit);

                            a.onclick = function () {
                                var flag = confirm("确定要删除这篇博客吗?");
                                if (flag === true){
                                    a.href = 'blogDelete' + location.search;
                                }
                            }
                        }
                    }else {
                        alert("获取信息失败!")
                    }
                }
            });
        }

        <!--    判定用户登录状态,登录的用户信息 -->
        function getUserInfo(page) {
            $.ajax({
                type: 'get',
                url: 'login',
                success: function (body) {
                    // 判断 body是否有效
                    if (body.userId && body.userId > 0){
                        if (page == 'list.html'){
                            getMessage(body.userName);
                            console.log("用户"+body.userName+"登录成功")
                        }
                        getAuthorInfo(body);
                    }else {
                        // 跳到 login.html
                        alert("当前您尚未登录,请先登录!")
                        location.assign('login.html')
                    }
                },
                error:function () {
                    alert("当前网络连接错误 请重试!")
                    location.assign('login.html')
                }
            })
        }
        getUserInfo("blogDetail.html")

        let article = document.querySelector(".card .article");
        article.onclick = function () {
            $.ajax({
                type: 'get',
                url: 'authorInfo' + location.search + "&getBlog=yes",
                success: function (body) {
                    let right = document.querySelector(".right");
                    right.innerHTML = '';// 清空原有的
                    for (let blog of body){
                        let blogDiv = document.createElement('div');
                        blogDiv.className = 'blog';
                        // 构造标题
                        let titleDiv = document.createElement('div');
                        titleDiv.innerHTML = blog.title;
                        titleDiv.className = 'title';
                        blogDiv.appendChild(titleDiv);

                        // 构造发布时间
                        let dateDiv = document.createElement('div');
                        dateDiv.innerHTML = blog.postTime;
                        dateDiv.className = 'date';
                        blogDiv.appendChild(dateDiv);
                        // 构造摘要
                        let descDiv = document.createElement('div');
                        descDiv.innerHTML = blog.content;
                        descDiv.className = 'desc';
                        blogDiv.appendChild(descDiv);

                        // 构造查看全文
                        let a = document.createElement('a');
                        a.innerHTML = '查看全文 &gt;&gt;';
                        // 跳转时,需要知道是哪篇博客
                        a.href = 'blogDetail.html?blogId=' + blog.blogId;
                        blogDiv.appendChild(a);
                        // 挂到right上
                        right.appendChild(blogDiv);
                    }
                }
            })
        }
    </script>
</body>
</html>